import { Button, Form } from "@arco-design/web-react"
import dayjs from "dayjs";
import { useEffect } from "react";
import { useRecoilValue } from "recoil";
import { FormSelect } from "../../../../../../common/components/FormSelect";
import { PermissionType, UserInfo } from "../../../../../../common/types/conversation";
import { permissionOptions } from "../../../../../../common/utils/permissionOptions";
import { userInfoState } from "../../../../../../store/userInfo";

import './index.css'

const FormItem = Form.Item;

export interface UserConfigForm {
  permission_type: PermissionType;
}

interface UserInfoFormProps {
  currentUser: UserInfo;

  handleSubmit: (values: UserConfigForm) => void;
}

export const UserInfoForm = (props: UserInfoFormProps) => {

  const { currentUser, handleSubmit } = props;
  const { id, username, permission, created_at, ticket_number, efficient_ticket_number, score } = currentUser;
  const userInfo = useRecoilValue(userInfoState);

  const [form] = Form.useForm<UserConfigForm>();

  useEffect(() => {
    form.setFieldValue("permission_type", id); // 手动修改
  }, [currentUser]);

  return (
    <div className="user-config-form-wrapper">
      <h1 style={{ textAlign: "center", paddingBottom: '100px' }}>权限管理</h1>
      <Form<UserConfigForm> key={`user_config_${id}`} onSubmit={handleSubmit} form={form}>
        <FormItem style={{ width: '80%' }} label='用户ID'>
          <div>{id}</div>
        </FormItem>
        <FormItem style={{ width: '80%' }} label='用户名'>
          <div>{username}</div>
        </FormItem>
        <FormItem style={{ width: '80%' }} label='创建时间'>
          <div>{dayjs(created_at).format('YYYY-MM-DD HH:mm')}</div>
        </FormItem>
        <FormItem style={{ width: '80%' }} label='处理工单数'>
          <div>{ticket_number}</div>
        </FormItem>
        <FormItem style={{ width: '80%' }} label='服务平均分'>
          <div>{Math.floor(score / efficient_ticket_number * 100) / 100 || efficient_ticket_number}</div>
        </FormItem>
        <FormItem<UserConfigForm> disabled={userInfo.id === currentUser.id} style={{ width: '80%', height: '40%' }} required field="permission_type" label='权限'>
          <FormSelect defaultValue={permission} options={permissionOptions} />
        </FormItem>
        <div className='conversation-config-submit-btn'>
          <Button onClick={() => { form.submit() }} style={{ width: '20%' }} type='primary'>更改权限</Button>
        </div>
      </Form>
    </div>
  )
}